<template>
  <div @click="bodyClick($event)" class="item_list">
    <div
    class="item_list_Con"
    :style="{'height':(winHei-65-50)+'px'}">

      <div v-if="is_no_item_list" class="no_item_list">
        <div class="upFileBox">
          <div class="upFileBoxCon">
            <img src="@/assets/img/home/upFile.png" alt="">
            <span>点击上传token获取订单</span>
          </div>
          <input type="file" @change="getFile($event)">
        </div>
      </div>

      <div v-if="!is_no_item_list" class="item_list_box">

        <ul class="item_list_box_top">
          <li>
            <ImportBox ref="importBox" :pos="'left'"></ImportBox>
          </li>
          <li>
              <div @click.stop="" class="selectBox">
                <div @click="setVis('is_selectBox_bot',true)" class="selectBox_topBg"
                :class="{'s_box_top_o':is_selectBox_bot}">
                  <span>
                    {{selectBox_bot_arr[s_B_bot_idx].text}}
                  </span>
                  <img src="@/assets/img/itemList/arrow_down.png" alt="">
                </div>
                <div v-show="is_selectBox_bot" class="selectBox_botBg">
                  <ul class="selectBox_bot">
                    <li v-for="(selectBox_bot_It,selectBox_bot_Idx) in selectBox_bot_arr"
                    :key="'selectBox_bot_It_0'+selectBox_bot_Idx"
                    :class="{'s_B_bot_Ac':s_B_bot_idx==selectBox_bot_Idx}"
                    @click="set_s_B_bot(selectBox_bot_Idx,selectBox_bot_It.id)">
                      <span>
                        {{selectBox_bot_It.text}}
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
          </li>
          <li>
            <div @click="oneKeyItem"
             class="btn bor_01"
             :class="{'btn_daDan':!is_show_daDan}">
              一键打单
            </div>
          </li>
          <li>
            <div class="btn bor_02">
              解除代收发
            </div>
          </li>
        </ul>

        <div class="item_list_box_bot">
          <div class="item_list_box_tb">
            <div class="item_list_box_tbCon">
              <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <th>序号</th>
                  <th>订单号</th>
                  <th>token</th>
                  <th>商品</th>
                  <th>交易金额</th>
                  <th>手续费</th>
                  <th>预赔付</th>
                  <th>收货地址</th>
                  <th>创建时间</th>
                  <th>订单状态</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(itemListArr_It,itemListArr_Idx) in itemListArr"
                :key="'itemListArr_It_0'+itemListArr_Idx">
                  <td>
                    {{itemListArr_It.id}}
                  </td>
                  <td>
                    <div @click.stop="showpopmsgFn(itemListArr_It.orderid)" class="K_bor">
                      {{getVal(itemListArr_It.orderid,4)}}
                    </div>
                  </td>
                  <td>
                    <div @click.stop="showpopmsgFn(itemListArr_It.token)" class="K_bor">
                      {{getVal(itemListArr_It.token,4)}}
                    </div>
                  </td>
                  <td>
                    <div @click.stop="showpopmsgFn(itemListArr_It.shop_name)" class="K_bor">
                      {{getVal(itemListArr_It.shop_name,6)}}
                    </div>
                  </td>
                  <td>
                    {{itemListArr_It.money}}
                  </td>
                  <td>
                    {{itemListArr_It.fee}}
                  </td>
                  <td>
                    {{itemListArr_It.for}}
                  </td>
                  <td>
                    <div @click.stop="showpopmsgFn(itemListArr_It.receiving_address)" class="K_bor">
                      {{getVal(itemListArr_It.receiving_address,9)}}
                    </div>
                  </td>
                  <td>
                     {{itemListArr_It.times}}
                  </td>
                  <td>
                    <div v-if="itemListArr_It.status==0||itemListArr_It.status==7" class="K_bor k_00">
                      待发货
                    </div>
                    <div v-else-if="itemListArr_It.status==1" class="K_bor k_01">
                      已发货
                    </div>
                    <div v-else-if="itemListArr_It.status==2" class="K_bor k_02">
                      等待商家审核
                    </div>
                    <div v-else-if="itemListArr_It.status==3||itemListArr_It.status==4" class="K_bor k_02">
                      商家审核通过
                    </div>
                    <div v-else-if="itemListArr_It.status==5" class="K_bor k_02">
                      退款售后
                    </div>
                    <div v-else-if="itemListArr_It.status==6||itemListArr_It.status==8" class="K_bor k_02">
                      已退款
                    </div>
                  </td>
                  <td class="last_td">
                    <div class="btn_box">
                      <div v-show="itemListArr_It.is_daDan" class="K_bor k_00">
                        打单成功
                      </div>
                      <div @click.stop="seeLogistic(itemListArr_Idx)" class="K_bor see">
                        查看物流
                      </div>
                    </div>
                  </td>
                </tr>
              </table>

              <FenYe v-if="itemListArr.length!==0" ref="myFenye" :last_page="itemList_all_page"></FenYe>
              <div v-else class="noData">
                <div class="noDataCon">
                  <img src="@/assets/img/user/noData.png" alt="">
                  <span>
                    No Data
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>

      </div>

    </div>

    <div v-show="is_show_logistics" class="logistics_info">
        <div @click.stop="" class="logistics_infoMain">
          <div class="top">

            <div class="wuliu">
              {{logistics_msg}}
            </div>

          </div>
          <div class="bot">
              <dl>
                <dt @click="setVis('is_show_logistics',false)">
                  确定
                </dt>
                <dd @click="setVis('is_show_logistics',false)">
                  取消
                </dd>
              </dl>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import FenYe from "@/components/vuePagination.vue";
import ImportBox from "@/components/importBox.vue";
export default {
  name: 'Item_list',
  data(){
    return{
      is_no_item_list:true,//true,
      selectBox_bot_arr:[
        {
          text:"全部",
          id:null
        },
        {
          text:"待发货",
          id:0
        },
        {
          text:"已发货",
          id:1
        },
        {
          text:"等待商家审核",
          id:2
        },
        {
          text:"商家审核通过",
          id:3
        },
        {
          text:"退款售后",
          id:5
        },
        {
          text:"已退款",
          id:6
        }
      ],
      s_B_bot_idx:0,
      is_selectBox_bot:false,
      importTokenArr:"",
      itemList_all_page:null,
      itemListArr:[],
      ori_itemListArr:[],
      is_show_logistics:false,//false true
      logistics_msg:'',
      is_show_daDan:true
    }
  },
  components: {
    ImportBox,
    FenYe
  },
  computed:{
    getVal(x,y){
      return (x,y)=>{
        if(x.length>y){
          return x.slice(0,y)+'...';
        }else{
          return x;
        }
      }
    }
  },
  activated() {
    let that=this;
    //that.is_no_item_list=true;
    if(!that.is_no_item_list){
      that.getList(1);
    }
  },

  methods:{

    filter_itemListArr(val){
      let that=this;
      console.log("filter_itemListArr:",val);
      if(val!==null){
        console.log("val为:"+val);
        console.log("ori_itemListArr:",that.ori_itemListArr);
        let new_item_arr=[];
        if(val!==3){
          if(val==6){
            for(let i=0;i<that.ori_itemListArr.length;i++){
              if(that.ori_itemListArr[i].status==6||that.ori_itemListArr[i].status==8){
                new_item_arr.push(that.ori_itemListArr[i]);
                console.log("i_0:"+i);
              }
            }
            

          }else{

            for(let i=0;i<that.ori_itemListArr.length;i++){
              if(val==0){
                if(that.ori_itemListArr[i].status==val||that.ori_itemListArr[i].status==7){
                  new_item_arr.push(that.ori_itemListArr[i]);
                  console.log("i_0:"+i);
                }
              }else{
                if(that.ori_itemListArr[i].status==val){
                  new_item_arr.push(that.ori_itemListArr[i]);
                  console.log("i_0:"+i);
                }
              }

            }

          }

        }else{
             for(let i=0;i<that.ori_itemListArr.length;i++){
               if(that.ori_itemListArr[i].status==3||that.ori_itemListArr[i].status==4){
                 new_item_arr.push(that.ori_itemListArr[i]);
                 console.log("i_0:"+i);
               }
             }
        }

        let allcount=new_item_arr.length;
        if(allcount%10==0){
          that.itemList_all_page=allcount/20;
        }else{
          that.itemList_all_page=Math.floor(allcount/20)+1;
        }

        console.log("new_item_arr:",new_item_arr);
        that.itemListArr=new_item_arr;
        console.log("itemListArr:",that.itemListArr);
      }else{
        console.log("为null");
        that.getList(1);
      }

    },
    async da_Dan(){
      let that=this;
      for(let j=0; j<that.itemListArr.length; j++) {
          await (function(){
              return new Promise(function(res, rej){
                console.log("是否需要打单："+that.itemListArr[j].status);

                    setTimeout(()=>{
                      that.$request.post(
                           `/api/order/order_census`,
                           {
                            order_id:that.itemListArr[j].id
                           },
                           {

                           }
                        ).then((res)=>{
                            //console.log("一键打单请求成功：",res);
                            console.log("当前索引_j:"+j,"当前_id:"+that.itemListArr[j].id);
                            if(res.data.code==1){
                              that.itemListArr[j].is_daDan=true;
                              //that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
                            }else{

                            }


                        })
                        .catch((err)=>{
                          console.log("一键打单请求失败：",err);
                          that.$bus.$emit("toastEvent",err.data.msg,0);
                        });
                        res();
                    },500);

              })
          }());
      }
    },
    // 一键打单
    oneKeyItem(){
      let that=this;
      for(let i of that.itemListArr){
        //that.itemListArr[i].is_daDan=false;
        Vue.set(i,"is_daDan",false);
      }
      if(that.is_show_daDan){
        console.log("========可以打单========");
        that.da_Dan().then(res=>{
          console.log("循环结束：",that.itemListArr);
        });
      }else{
        console.log("========无法打单========");
      }


    },
    // 订单列表
    getList(val){
      let that=this;
      this.$request.post(
           `/api/order/orderlist?pageSize=20&pageNo=${val}`,
           {
            tokens:that.importTokenArr
           },
           {

           }
        ).then((res)=>{
            console.log("订单列表请求成功：",res);

            if(res.data.code==1){
              let allcount=res.data.data.count;
              if(allcount%10==0){
                that.itemList_all_page=allcount/20;
              }else{
                that.itemList_all_page=Math.floor(allcount/20)+1;
              }
              that.itemListArr=res.data.data.list;
              that.ori_itemListArr=res.data.data.list;
              console.log("that.itemListArr_res：",that.itemListArr);
              let for_step=0;
              for(let i of that.itemListArr){
                if(i.status!==3){
                  for_step++;
                }
                console.log("status:"+i.status,'for_step:'+for_step);
                if(for_step>=that.itemListArr.length){
                  that.is_show_daDan=false;
                }else{
                  that.is_show_daDan=true;
                }
              }
            }
        })
        .catch((err)=>{
          console.log("订单列表请求失败：",err);
        });
    },
    bodyClick(e){
      let that=this;
      if(!that.is_no_item_list){
        that.$refs.importBox.setVis(false);
        that.is_selectBox_bot=false;
        that.is_show_logistics=false;
        console.log("bodyClick");
      }
    },
    getFile(e){
      let that=this;
      console.log("getFile:",e);
      let file=e.target.files[0];
      console.log("file:",e.target.files[0]);
      let reader = new FileReader(file);
      if (!/\.txt$/i.test(file.name)) {
        return;
      }
      reader.readAsText(file);
      reader.onload = function(ev) {
        console.log("拿到的文本：",ev.target.result);

         that.importTokenArr=ev.target.result;
         that.is_no_item_list=false;
         that.getList(1);
        // let newToken=ev.target.result.split(",").filter(v=>v!=="");

        // if(newToken.length!==0){
        //   newToken.map(v=>v.replace("\r\n",""));
        //   for(let i=0;i<newToken.length;i++){

        //     if(newToken[i].indexOf("\r\n")!==-1){
        //       console.log(i+"有\r\n");
        //       newToken[i]=newToken[i].replace("\r\n","");
        //     }else{
        //       console.log(i+"没有\r\n");
        //     }
        //   }
        //   that.importTokenArr=newToken;
        //   that.is_no_item_list=false;
        //   console.log("that.importTokenArr:",that.importTokenArr);
        //   that.itemList(1);
        // }

      };
    },
    seeLogistic(val){
      let that=this;
      that.logistics_msg=that.itemListArr[val].nu;
      that.is_show_logistics=true;
      console.log("that.logistics_msg:"+that.logistics_msg);
    },
    showpopmsgFn(val){
      let that=this;
      that.logistics_msg=val;
      that.is_show_logistics=true;
    },
    setVis(x,y){
      let that=this;
      that[x]=y;
    },
    set_s_B_bot(val,val_id){
      let that=this;
      that.s_B_bot_idx=val;
      that.filter_itemListArr(val_id);
      that.setVis('is_selectBox_bot',false);
    },
    getImportBox(){
      let that=this;
      that.is_no_item_list=true;
    },
    orderBtn(){
      let that=this;
    }
  }
}
</script>
<style lang="less" scoped>
  .item_list{
    width: 100%;
    .last_td{
      .btn_box{
        display: flex;
        flex-direction: column;
        .K_bor.k_00{
          margin-bottom: 5px;
          cursor: default !important;
        }
      }
    }
    .noData{
    	background-color: #fff;
    	padding: 100px 0;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	.noDataCon{
    		width: 74px;
    		img{
    			display: block;
    			width: 100%;
    		}
    		span{
    			display: block;
    			color: #bfbfbf;
    			text-align: center;
    			font-size: 15px;
    			line-height: 24px;
    		}
    	}
    }
    .upFileBox{
    	width: 200px;
    	height: 140px;
    	background-color: #fafafa;
    	border: 1px dashed #d9d9d9;
    	position: relative;
    	.upFileBoxCon{
    		width: 200px;
    		height: 140px;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		img{
    			display: block;
    			width: 36px;
    			height: 36px;
    		}
    		span{
    			display: block;
    			text-align: center;
    			color: #252525;
    			font-size: 12px;
    			line-height: 22px;
    			margin-top: 15px;
    		}
    	}
    	input{
    		display: block;
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		opacity: 0;
    		cursor: pointer;
    	}
    }

    .upFileBox:hover{
    	border-color: #ff8040;
    }

    .item_list_Con{
      padding: 25px;
      overflow-y: auto;
      //display: flex;
      .no_item_list{
        background-color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .item_list_box{
        width: 100%;
        flex-shrink: 0;
        height: auto;
        .item_list_box_top{
          display: flex;
          flex-direction: row;
          align-items: center;
          >li{
            margin-right: 20px;
            .btn{
              border: 1px solid transparent;
              height: 32px;
              line-height: 32px;
              padding: 0 16px;
              font-size: 14px;
              cursor: pointer;
            }
            .bor_00{
              border-color: #d9d9d9;
              background-color: #f5f5f5;
              color: #b8b8b8;
              cursor: not-allowed;
            }
            .bor_01{
              background-color: #ff8040;
              color: #fff;
            }
            .bor_02{
              background-color: #d71345;
              color: #fff;
            }

            .selectBox{
              width: 200px;
              position: relative;
              .selectBox_topBg{
                border: 1px solid #d9d9d9;
                background-color: #fff;
                width: 178px;
                padding: 0 10px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                span{
                  display: block;
                  height: 32px;
                  line-height: 32px;
                  color: #595959;
                  font-size: 14px;
                }
                img{
                  display: block;
                  width: 15px;
                  height: 15px;
                }
              }

              .selectBox_topBg:hover{
                border-color: #ff8040;
                span{
                  color: #ff8040;
                }
              }

              .s_box_top_o{
                border-color: #ff8040;
                span{
                  color: #ff8040;
                }
              }

              .selectBox_botBg{
                position: absolute;
                top: 36px;
                left: 0;
                width: 100%;
                z-index: 1;
                padding: 5px 0;
                .selectBox_bot{
                  background-color: #fff;
                  border-radius: 3px;
                  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
                  padding: 5px 0;
                  li{
                    cursor: pointer;
                    span{
                      display: block;
                      padding: 0 15px;
                      height: 30px;
                      line-height: 30px;
                      font-size: 14px;
                      color: #595959;
                    }
                  }
                  li:hover{
                    background-color: #fff8ed;
                  }
                  .s_B_bot_Ac{
                    background-color: #fff8ed;
                  }
                }
              }
            }
          }
        }

        .item_list_box_bot{
          margin-top: 20px;
          .item_list_box_tb{
            overflow-x: auto;
            .item_list_box_tbCon{
              table{
              	width: 100%;
              	tr{
              		th{
              			background-color: #fafafa;
              			text-align: center;
              			padding:15px 10px;
              			color: #252525;
              			font-size: 14px;
              			height: 20px;
              			line-height: 20px;
              			position: relative;
              			font-weight: normal;
              		}
              		th:not(:last-child):after{
              			content: "";
              			position: absolute;
              			top: 0;
              			right: 0;
              			bottom: 0;
              			margin: auto;
              			width: 1px;
              			height: 20px;
              			background-color: #ebebeb;
              		}
              		td{
              			background-color: #fff;
              			text-align: center;
              			padding:10px;
              			border-top:1px solid #f0f2f5;
              			color: #595959;
              			font-size: 13px;
              			//height: 30px;
              			line-height: 30px;
                    text-align: center;
              		}
              	}
              	tr:hover td{
              		background-color: #fafafa;
              	}
              }

              .K_bor{
                background-color: #fafafa;
                border: 1px solid #d9d9d9;
                color: #575757;
                font-size: 12px;
                //height: 20px;
                line-height: 20px;
                padding: 0 5px;
                display: inline-block;
                cursor: pointer;
              }
              .see:hover{
                border-color: #ff8040;
                color: #ff8040;
                cursor: pointer;
              }
              .k_00{
                background-color: #f6ffed;
                border-color: #b7eb8f;
                color: #389e0d;
              }
              .k_01{
                background-color: #fff1f0;
                border-color: #ffa39e;
                color: #cf1322;
              }
              .k_02{
                background-color: #fcffe6;
                border-color: #eaff8f;
                color: #7cb305;
              }
              .k_03{
                background-color: #87d068;
                border-color: #87d068;
                color: #ffffff;
              }
            }
          }
        }

      }
    }

    .logistics_info{
      position:fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .logistics_infoMain{
        background-color: #fff;
        border-radius: 3px;
        padding: 0 15px;
        width: 400px;
        box-shadow: 0 0 16px #ddd;
        .top{
          padding: 20px 0;
          .wuliu{
            color: #666;
            font-size: 14px;
            line-height: 22px;
          }
        }
        .bot{
          padding:10px 0;
            border-top: 1px solid #f0f0f0;
            dl{
              display: flex;
              flex-direction: row-reverse;
              dt,dd{
                height: 30px;
                line-height: 30px;
                padding: 0 14px;
                cursor: pointer;
                border-radius: 3px;
                font-size: 14px;
                border: 1px solid #f47920;
              }
              dt{
                background-color: #f47920;
                color: #fff;
                margin-left: 10px;
              }
              dd{
                color: #595959;
                border-color: #d9d9d9;
                transition: .3s;
              }
              dd:hover{
                color: #f47920;
                border-color: #f47920;
              }
            }
        }
      }
    }

    .btn_daDan{
      cursor: not-allowed !important;
    }
  }
</style>
